<style>
    .custom-toolbar{padding: 0em 1em 1em 0em;}
    .dropdown-menu{
        z-index: 9999;
    }
</style>
<div class="row-fluid clearfix">
    <div class="col-md-12 column">
        <ul class="breadcrumb">
            <li>
                <a href="#">首页</a>
            </li>
            <li class="active">
                客户信息管理
            </li>
        </ul>
    </div>
    <div class="col-md-12 column">
        <div class="col-sm-12 div-page">
            <div class="col-sm-12 div-table">
                <div id="custom-toolbar" class="col-sm-12 custom-toolbar">
                    <div class="form-inline" role="form">
                        <!--<button id="btn-DataDetail" type="button" role="button" class="subFun btn btn-sm btn-Data btn-info disabled">
                            <span class="glyphicon glyphicon-th-list"></span> 详情
                        </button>-->
                        <button id="btn-Filter" type="button" href="#modal-Filter" role="button" data-toggle="modal" class="btn btn-sm btn-primary pull-right" title="请选择数据">
                            <span class="glyphicon glyphicon-th-list"></span> 筛选
                        </button>
                    </div>
                </div>
                <table id="table" class="table table-hover table-condensed"
                       data-click-to-select="true"  data-single-select="true" data-height="430">
                    <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true" ></th>
                        <th data-field="Reqdate" data-halign="center" data-align="center" data-width="100">交易日期</th>
                        <th data-field="Reqtime" data-halign="center" data-align="center" data-width="100">交易时间</th>
                        <th data-field="Reqid" data-halign="center" data-align="center" data-width="150">安全设备编号</th>
                        <th data-field="TransName" data-halign="center" data-align="center" data-width="150">交易类型</th>
                        <th data-field="Transamt" data-halign="center" data-align="center" data-width="100">交易金额</th>
                        <th data-field="Transfee" data-halign="center" data-align="center" data-width="100">手续费</th>
                        <th data-field="Craccno" data-halign="center" data-align="center" data-width="180">转入账户</th>
                        <th data-field="Craccname" data-halign="center" data-align="center" data-width="100">转入姓名</th>
                        <th data-field="Accno" data-halign="center" data-align="center" data-width="180">转出账户</th>
                        <th data-field="Accname" data-halign="center" data-align="center" data-width="100">转出姓名</th>
                        <th data-field="Transtype" data-halign="center" data-align="center" data-width="150">转帐交易类型</th>
                        <th data-field="Abisrespcode" data-halign="center" data-align="center" data-width="100">应答码</th>
                        <th data-field="Respmean" data-halign="center" data-align="center" data-width="100">应答信息</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="col-sm-12 alert alert-success div-alert" id="events-result" data-es="Aquí se muestra el resultado del evento"></div>
        <!-- #遮罩层 --->
        <div class="modal fade" id="modal-Template" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width: 1100px">
                <div class="modal-content" id="modal-content-tpls">
                    <!-- #从模板加载 --->
                </div>
            </div>
        </div>
        <!-- #筛选条件遮罩层 --->
        <div class="modal fade" id="modal-Filter" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <div class="modal-title" id="myModalLabel1">
                            筛选条件
                        </div>
                    </div>
                    <form id="queryForm" method="post" class="form-horizontal layer_msg">
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">起始日期<span class="red">*</span></label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="DateStartView" placeholder="请输入起始日期（必输项）"/>
                                    <input type="hidden" id="DateStart" name="DateStart"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">结束日期<span class="red">*</span></label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="DateEndView" placeholder="请输入结束日期（必输项）"/>
                                    <input type="hidden" id="DateEnd" name="DateEnd"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3  control-label">所属机构</label>
                                <div class="col-sm-8">
                                    <input type="hidden" class="form-control" name="orgid" id="OrgId"/>

                                    <div class="col-md-4" style="padding-left: 0;padding-right: 2px">
                                        <select class="form-control" id="level1">
                                        </select>
                                    </div>
                                    <div class="col-md-4" style="padding-left: 0;padding-right: 2px;display: none">
                                        <select class="form-control" id="level2">
                                        </select>
                                    </div>
                                    <div class="col-md-4" style="padding-left: 0;padding-right: 0;display: none">
                                        <select class="form-control" id="level3">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">安全设备号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="ZFT_SafeDevId" name="ZFT_SafeDevId" placeholder="请输入密码键盘编号"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">交易类型</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="ZFT_TransName" name="ZFT_TransName">
                                        //动态加载
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">金融性交易</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="transflag" name="transflag">
                                        <option value="" selected="selected">全部</option>
                                        <option value="0000">是</option>
                                        <option value="9999">否</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">交易账号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="ZFT_FlwNo" name="ZFT_FlwNo" placeholder="请输入转账卡号或缴费号码"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">交易应答码</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="abisrespcode" name="abisrespcode">
                                        <option value="" selected="selected">全部</option>
                                        <option value="0000">成功</option>
                                        <option value="9999">失败</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="modal-btn-query" type="submit" class="btn btn-primary">查询</button> <button id="modal-btn-close1" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        OrgSelectInit();
        $('#DateStartView,#DateEndView').datepicker({
            format:"yyyy.mm.dd"
        });

        /*筛选框下拉列表初始化_add_ywq_20140123-Start*/
        FormatSelect(globalUrl+"api/MenuScript",$("#ZFT_TransName"),"全部","",function(){
            $('#modal-Filter').modal('show');
        });
        /*筛选框下拉列表初始化_add_ywq_20140123-End*/

        /*BootstrapTable初始化-Start*/
        $('#table').bootstrapTable({
            queryParams:function(params) {
                var qp={
                    page:params.offset/params.limit+1,
                    rows:params.limit
                };
                return qp;
            },
            data: [],
            sidePagination: 'server',
            pagination:true,
            pageSize:10,
            search:false,
            responseHandler:function(data){
                $('#modal-Filter').modal('hide');
                return data.data;
            }
        })
                .on('click-row.bs.table', function (e, row, $element) {
                    if ( $element.hasClass('selected') ) {
                        $element.removeClass('info');
                    }
                    else {
                        $element.parent('tbody').find(' > tr.selected ').removeClass("info");
                        $element.addClass('info');
                    }
                })
                .on('check.bs.table', function (e, row, $element) {
                    $(".btn-Data").removeClass("disabled");
                })
                .on('uncheck.bs.table', function (e, row, $element) {
                    $(".btn-Data").addClass("disabled");
                });
        /*BootstrapTable初始化-End*/

        /*筛选框查询按钮点击事件注册_add_ywq_20140123-Start*/
        $("#modal-btn-query").click(function(e){
            e.preventDefault();
	        $("#DateStart").val($("#DateStartView").val().replace(/\./g,""));
            $("#DateEnd").val($("#DateEndView").val().replace(/\./g,""));
            if($("#DateStart").val()==""||$("#DateEnd").val()=="")
            {
                alert("请选择日期");
                return;
            }
            if($("#DateStart").val()>$("#DateEnd").val())
            {
                alert("结束日期必须大于起始日期");
                return;
            }
            $("#OrgId").val(localStorage.orgid);
            /*表格初始化_add_ywq_20140123-Start*/
            $('#table').bootstrapTable('refresh',{url:globalUrl+'api/TradQueryHistory?'+$("#queryForm").serialize()});
            /*表格初始化_add_ywq_20140123-End*/
        });
        /*筛选框查询按钮点击事件注册_add_ywq_20140123-End*/


        /*详情按钮点击事件注册_add_ywq_20140123-Start*/
        $('.subFun ').on("click",function () {
            //计算按钮对应的模板文件名
            var fileName=$(this).attr("id").substr(8);
            //计算模板文件地址
            var url="../assets/tpls/CustomerInfo_"+fileName+".html";
            //异步获取模板数据并导入绑定数据
            getTpls(url,function(resp){
                $("#modal-content-tpls").html(resp);
                dataBindToModal($('#validForm'),$('#table'));
                $('#modal-Template').modal('show');
            });
        });
        /*详情按钮点击事件注册_add_ywq_20140123-End*/
    });
</script>